<template>
  <div id="area">
    <mt-header title="欢迎注册">
      
        <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    
    </mt-header>
    <mt-field type="text" label="用户名" placeholder="请输入用户名" v-model="username" :state="nameState"></mt-field>
    <br />
    <mt-field type="password" label="密码" placeholder="请输入密码" v-model="userpswd" :state="pswdState"></mt-field>
    <br />
    <mt-field
      type="password"
      label="密码确认"
      placeholder="请再次输入密码"
      v-model="pswdverify"
      :state="pvState"
    ></mt-field>
    <br />
    <mt-field type="email" label="邮箱" placeholder="请输入邮箱" v-model="uemail" :state="emailState"></mt-field>
    <mt-button type="primary" size="large" @click="checkInfo">确定</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      userpswd: "",
      pswdverify: "",
      uemail: "",
      nameState: "",
      pswdState: "",
      pvState: "",
      emailState: ""
    };
  },
  methods: {
    checkInfo() {
      var nameExp = /^[0-9a-zA-Z]{6,12}$/;
      var pswdExp = /^[0-9a-zA-Z!#@]{8,12}$/;
      var emailExp = /^[0-9a-zA-Z_-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
      if (!nameExp.test(this.username)) {
        this.nameState = "error";
        this.$toast({
          message: "用户名格式为6到12位任意字符",
          position: "bottom"
        });
        return;
      } else {
        this.nameState = "success";
      }
      if (!pswdExp.test(this.userpswd)) {
        this.pswdState = "error";
        this.$toast({
          message: "密码格式为8到12位任意字符",
          position: "bottom"
        });
        return;
      } else {
        this.pswdState = "success";
      }
      if (this.pswdverify == this.userpswd) {
        this.pvState = "success";
      } else {
        this.pvState = "error";
        this.$toast({
          message: "两次密码不相同",
          position: "bottom",
         
        });
        return;
      }
      if (!emailExp.test(this.uemail)) {
        this.emailState = "error";
        this.$toast({
          message: "邮箱格式错误"
        });
        return;
      } else {
        this.emailState = "success";
      }
      //console.log(this)
      console.log('发送请求')
      this.axios
        .post(
          "/register",
          "uname=" + this.username + "&password=" + this.userpswd
        )
        .then(res => {
          // console.log(res.data.code)
          if (res.data.code == 1) {
            this.$messagebox
              .confirm("注册成功，是否登录？", "提示")
              .then(action => {
                this.$router.push("/login");
              })
              .catch(error => {
                this.$router.push("/");
              });
          } else {
            this.$messagebox.alert(res.data.message, "提示");
          }
        });
    }
  }
};
</script>
<style scoped>

</style>